<script setup>
import { ref, defineEmits, onMounted } from 'vue'
import { getSkuApi } from '@/api/item'

const emit = defineEmits(['confirm', 'cancel'])

const dialogVisible = ref(false)
const selectedItems = ref([])
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const itemList = ref()
const searchForm = ref({
  title: '',
  code: ''
})

const getItemList = async () => {
  const res = await getSkuApi(searchForm.value.title, searchForm.value.code, page.value, pageSize.value)
  itemList.value = res.rows
  total.value = res.total
}

const handleSearch = () => {
  page.value = 1
  getItemList()
}

const handleConfirm = () => {
  emit('confirm', selectedItems.value)
  dialogVisible.value = false
}

const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
  selectedItems.value = []
}

const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getItemList()
}

const handleCurrentChange = (val) => {
  page.value = val
  getItemList()
}

onMounted(() => {
  getItemList()
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="商品选择框" width="800px">
    <div style="display: flex; height: 600px;">
      <!-- 左侧筛选区 -->
      <div style="width: 100px; padding: 20px; border-right: 1px solid #ebeef5;">
        <div style="margin-bottom: 10px;">
          <el-button size="small" circle @click="searchForm.title = ''; searchForm.code = ''">
            <el-icon>
              <Refresh />
            </el-icon>
          </el-button>
          <el-button size="small" circle @click="handleSearch">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </div>
        <el-input v-model="searchForm.title" placeholder="商品名称" style="margin-bottom: 10px;" />
        <el-input v-model="searchForm.code" placeholder="规格编码" />
      </div>

      <!-- 右侧表格区 -->
      <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
        <el-table :data="itemList" style="width: 100%; flex: 1; overflow: auto;"
          @selection-change="selectedItems = $event">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="#" width="50" />
          <el-table-column prop="code" label="商品编码" />
          <el-table-column prop="title" label="商品名称" />
          <el-table-column prop="commodityCode" label="规格编码" />
          <el-table-column prop="supplierName" label="供应商名称" />
          <el-table-column prop="brandName" label="品牌" />
          <el-table-column prop="price" label="单价" />
        </el-table>

        <div style="margin-top: 10px; text-align: right; flex-shrink: 0;">
          <el-pagination layout="prev, pager, next, jumper, ->, total" :total="total" :page-size="pageSize"
            :current-page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>